<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="cmn-Hans">

<head>
	<title>挑拣图片</title>
	{{template "admin/partials/html-head.html"}}
	<style>
		img {
			width: 100%;
		}
	</style>
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->

<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">

		<!-- Main Header -->
		{{template "admin/partials/html-header.html" .}}
		<!-- Left side column. contains the logo and sidebar -->
		{{template "admin/partials/html-menu.html"}}

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>
					General Form Elements
					<small>Preview</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="/admin/page/welcome"><i class="fa fa-dashboard"></i>首页</a></li>
					<li><a href="#">Forms</a></li>
					<li class="active">General Elements</li>
				</ol>
			</section>

			<!-- Main content -->
			<section class="content">
				<div class="row">
					<!-- left column -->
					<div class="col-md-6">
						<div class="box box-primary">
							<div class="box-header with-border">
								<h3 class="box-title">原网页内容</h3>
							</div>
							<form role="form" method="get" action="/admin/page/picture">
								<div class="box-body">
									<div class="form-group">
										<label for="name">name</label>
										<input type="text" class="form-control" name="url" value="{{.url}}"
											placeholder="包含图片的网址">
									</div>
								</div>
								<div class="box-footer">
									<button type="submit" class="btn btn-primary">Submit</button>
								</div>
							</form>
							<!-- /.box-header -->
							<div id="J-find-content">
								{{str2html .htmlContent}}
							</div>
						</div>
						<!-- /.box -->
					</div>
					<!--/.col (left) -->
					<!-- right column -->
					<div class="col-md-6">
						<div class="box box-primary">
							<div class="box-header with-border">
								<h3 class="box-title">挑选的图片和文字</h3>
							</div>
							<!-- /.box-header -->
							<div class="box-body">
								<form role="form" id="J-form">
									<!-- text input -->
									<div class="form-group">
										<label>图片</label>
										<div id="J-paste-pic">
											<!-- 选中的内容区 -->
										</div>
									</div>
									<div class="form-group">
										<label>文字</label>
										<div id="J-paste-text">
											<!-- 选中的内容区 -->
										</div>
									</div>
									<div class="box-footer">
										<button type="submit" class="btn btn-primary">Submit</button>
									</div>
								</form>
							</div>
						</div>
						<!-- /.box -->
					</div>
					<!--/.col (right) -->
				</div>
				<!-- /.row -->
			</section>
			<!-- /.content -->
		</div>
		<!-- /.content-wrapper -->

		<!-- Main Footer -->
		{{template "admin/partials/html-footer.html"}}

		<!-- Control Sidebar -->
		{{template "admin/partials/html-control-sidebar.html"}}
		<!-- /.control-sidebar -->

	</div>
	<!-- ./wrapper -->

	<!-- REQUIRED JS SCRIPTS -->
	{{template "admin/partials/html-js.html"}}
	<!-- /REQUIRED JS SCRIPTS -->

	<!-- page script -->
	<script>
		$(function () {
			//第三方页面的所有样式失效
			$("#J-find-content *").attr("class", null).attr("style", null).attr("id", null);
			// $("img").closest("a").remove();
			var $a = $("img").closest("a");
			$a.each(function (index, ele) {
				var html = $(ele).get(0).outerHTML;
				html = html.replace(/^<a/, "<div");
				html = html.replace(/\/a>$/, "/div>");
				$(ele).replaceWith(html);
			});
			//复制文字
			!function () {
				var oContent = $("#J-find-content")[0];
				oContent.onmouseup = function () {
					var txt_all = document.getSelection();
					var txt_sl = txt_all.focusNode.textContent;
					txt_cr = txt_sl.substring(txt_all.focusOffset, txt_all.anchorOffset);
					var pContent = $("#J-paste-text")[0];
					var para = document.createElement("p");
					var node = document.createTextNode(txt_cr);
					para.appendChild(node);
					pContent.appendChild(para);
					var inputDom = $('<input type="hidden" name="tag" value="' + txt_cr + '">');
					$("#J-form").append(inputDom);
				};
			}();

			//复制图片
			!function () {
				$("#J-find-content img").on("click", function () {
					console.log($(this).attr("src"))
					var imgsrc = $(this).attr("src");
					var para = document.createElement("img");
					para.src = imgsrc;
					var pContent = $("#J-paste-pic")[0];
					pContent.appendChild(para);
					var inputDom = $('<input type="hidden" name="picUrl" value="' + imgsrc + '">');
					$("#J-form").append(inputDom);
				})
			}();

			$("#J-form").on("submit", function () {
				// var params = $("form").serialize();
				var ts = $("input[name=tag]");
				var tags = [];
				ts.each(function (index, ele) {
					tags.push($(ele).val());
				})
				var params = {
					picUrl: $("input[name=picUrl]").val(),
					tag: tags.toString()
				}
				$.ajax({
					url: '/admin/api/pictures',
					type: 'post', //GET
					async: true,    //或false,是否异步
					data: JSON.stringify(params),
					contentType: "json",
					timeout: 5000,    //超时时间
					dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
					beforeSend: function (xhr) {
						console.log('发送前')
					},
					success: function (data, textStatus, jqXHR) {
						if (data.code !== 0) {
							layer.msg(data.msg, { icon: 5 });
							return
						}
						layer.msg(data.msg)
					},
					error: function (xhr, textStatus) {
						console.log('错误', textStatus)
					},
					complete: function () {
						console.log('结束');
					}
				})
				return false;
			});
		})
	</script>
</body>

</html>